<mat-tab-group (selectedIndexChange)="onTabChange($event)" selectedIndex="1">
  <mat-tab label="Chat with GPT"> <mat-card class="example-card">
      <!-- <mat-card-header>
        <mat-card-subtitle>Chat with GPT</mat-card-subtitle>
      </mat-card-header> -->
      <h2>Chat with GPT</h2>
      <mat-card-content class="content-border">
        <p>{{ gptResponse }}</p>
      </mat-card-content>
      <mat-card-footer>
        <mat-form-field appearance="outline"
          class="example-full-width chat-form">
          <mat-label>Client Chat</mat-label>
          <input matInput #message maxlength="256"
            placeholder="I need help with..."
            (keydown.enter)="sendMessage(message.value); $event.preventDefault()">
          <mat-icon matSuffix [fontIcon]="submitIconType"
            (click)="sendMessage(message.value)" [ngClass]="{'active': hover}"
            (mouseover)="hover = true" (mouseout)="hover = false"></mat-icon>
          <mat-hint align="start"><strong>Feel free to ask!</strong> </mat-hint>
          <mat-hint align="end">{{message.value.length}} / 256</mat-hint>
        </mat-form-field>
        <mat-progress-bar [mode]="progressBarMode"></mat-progress-bar>
      </mat-card-footer>
    </mat-card>
  </mat-tab>
  <mat-tab label="echarts">
    <div class="wrap">
      <div id="bar" class="echarts"></div>
      <div id="lineChart" class="echarts"></div>
      <!-- <nz-carousel class="carousel" [nzEnableSwipe]="false">
        <div nz-carousel-content>
          <img src="./../../../../assets/images/bj.png" alt="">
        </div>
        <div nz-carousel-content>
          <img src="./../../../../assets/images/bj.png" alt="">
        </div>
      </nz-carousel> -->
    </div>
  </mat-tab>
</mat-tab-group>